<template>
    <div>
        <div id="head">
            <h1 style="font-size: 50px;color: white;position: absolute;top: 150px;left: 650px">我的预约</h1>
        </div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    style="font-size: 16px"
                    prop="id"
                    label="订单号"
                    width="70">
            </el-table-column>
            <el-table-column
                style="font-size: 16px"
                prop="deskId"
                label="餐桌号"
                width="70">
            </el-table-column>
            <el-table-column
                    prop="yuyueTime"
                    label="预约时间"
                    width="230">
                <template v-slot="scope">
                {{formattedDate(scope.row.yuyueTime)}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="yuyueStatus"
                    label="预约类型"
                    width="230">
                <template v-slot="scope">
                    {{scope.row.yuyueType ===0 ? '线上订餐' : '到店点餐'}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="yuyueStatus"
                    label="预约状态"
                    width="230">
                <template v-slot="scope">
                    {{scope.row.yuyueStatus ===0 ? '未完成' : '已完成'}}
                </template>
            </el-table-column>
            <el-table-column label="操作" prop="id">
                <template v-slot="scope">

                    <el-popconfirm v-if="scope.row.yuyueStatus ===0" confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
                                   title="确认取消预约吗？" @confirm="del(scope.row.id)">
                        <el-button type="danger" slot="reference">取消预约</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="margin-top: 10px;">
            <el-pagination background :current-page="params.pageNum" :page-size="params.pageSize"
                           layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "HistoryOrder",
        data(){
            return{
                total: 0,
                tableData:[],
                params: {
                    pageNum: 1,
                    pageSize: 8,

                },

            }
        },
        mounted() {
            this.load()
        },
        methods: {
            load() {
                this.params.userId=JSON.parse(window.localStorage.getItem('user')).userId
                request.get('/yuyue/history', {
                    params: this.params
                }).then(res => {
                    console.log(res)
                    if (res.code === "200") {
                        this.total = res.data.total;
                        this.tableData = res.data.list;

                    }
                })
            },
            handleCurrentChange(pageNum) {
                this.params.pageNum = pageNum;
                this.load()
            },
            formattedDate(dateStr) {
                if (!dateStr){
                    return null
                }
                const date = new Date(dateStr);
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();
                const hours = date.getHours();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();
                return `${year}年${month}月${day}日${hours}:${minutes}:${seconds}`;
            },
            del(id) {
                request.delete('/yuyue/delete' + id).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('取消成功')
                        this.load();
                    } else {
                        this.$notify.error(res.msg)
                    }
                })

            },
            pay(orderId) {
                request.put('/order/pay' + orderId).then(res => {
                    if (res.code === '200') {
                        this.$notify.success('支付成功')
                        this.load();
                    } else {
                        this.$notify.error(res.msg)
                    }
                })
            },
            toOrderInfo(orderId,status){
                this.$router.push({
                    name: 'OrderInfo',
                    query: {param: orderId}
                })

            }
        },


    }
</script>

<style scoped>
    .el-table {
        margin-left: 5vw;
    }
    #head  {
        height: 350px;
        background-image: url("../../assets/aboutbackground.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }


</style>